<template>
    <div class="footer" v-show="todosShow">
      <span>已完成：{{completedTotals}}</span>
      <span>总共：{{todosTotals}}</span>
      <button @click="allShow">全部</button>
      <button @click="actionShow">执行</button>
      <button @click="completedShow">完成</button>
      <button @click="clearCompleted" v-show="clearShow">clear</button>
    </div>
</template>

<script>
  import {mapState,mapGetters,mapActions} from 'vuex'
    export default {
        name: "itemFooter",
      data(){
          return {

          }
      },
      computed:{
        ...mapState({
          todos:state=>state.todos
        }),
        ...mapGetters({
          todosTotals: 'todosTotals',
          completedTotals: 'completedTotals',
          clearShow: 'clearShow',
          todosShow: 'todosShow'
        })
      },
      methods:{
        ...mapActions({
          delCompleted: 'delCompleted',
          allShows:'allShow',
          showChanges:'showChanges'
        }),
          clearCompleted(){
            this.delCompleted();
          },
        allShow(){
          this.allShows();
        },
        actionShow(){
          this.showChanges(false);
        },
        completedShow(){
          this.showChanges(true);
        }
      }
    }
</script>

<style scoped>
  .footer{
    text-align: left;
    padding-right: 20px;

  }
  span{
    display: inline-block;
    line-height: 40px;
  }
  span:first-child{
    padding-left: 10px;
  }
  span:first-child::after{
    content: '/';
    display: inline-block;
    padding-left: 5px;
    line-height: 40px;
  }
  span:nth-child(2){
    padding-right: 20px;
  }
  button:nth-child(5){
    margin-right: 30px;
  }
</style>
